<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>凯格行为验证码 - Net C# demo</title>
<link rel="stylesheet" href="./style/demo.css" />
<!--
将以下域名替换成你的“应用服务器域名”
将以下 appid 替换成你的 AppID
服务器域名和appid在你的应用管理中获取
示例：<script src="https://cdn6.kgcaptcha.com/captcha.js?appid=XXX"></script>
-->
<script src="https://cdn9.kgcaptcha.com/captcha.js?appid=4gXIWZzz"></script>
<script>
kg.captcha({
    // 绑定弹窗按钮
    button: "#captchaButton",

    // 验证成功事务处理
    success: function (e) {
        console.log(e);
        // 将验证成功后的 token 通过隐藏域传递到后端
        kg.$("#kgCaptchaToken").value = e["token"];
        kg.html( kg.$( "#captchaButton" ), "验证成功，请提交数据" );
        kg.$( "#captchaButton" ).style.background = '#DDDDDD'
    },

    // 验证失败事务处理
    failure: function (e) {
        console.log(e);
        kg.html( kg.$( "#captchaButton" ), "验证失败，请重新验证" );
        kg.$( "#captchaButton" ).style.background = '#aaa'
    },

    // 点击刷新按钮时触发
    refresh: function (e) {
        console.log(e);
    }
});
// 检查表单提交
function check() {
    if (kg.$("#kgCaptchaToken").value === "") {
        alert("请完成图形验证后提交")
        return false;
    } else {
        return true;
    }
}
</script>
</head>
<body>
    <div class="nav_box">
        <select onchange="location.href=this.options[this.selectedIndex].value;">
            <option value="normal.html">嵌入式</option>
            <option value="extend-top.html" >向上触发</option>
            <option value="extend-down.html" >向下触发</option>
            <option selected="selected"  value="popup-a.html" >弹出式 A</option>
            <option value="popup-b.html" >弹出式 B</option>
        </select>
     </div>

    <form action="demo.jsp?cty=3" method="post" id="form" onsubmit="return check();">
        <!-- 将验证成功后的 token 通过隐藏域传递到后端 -->
        <input type="hidden" name="kgCaptchaToken" id="kgCaptchaToken" value="">
        <div class="inputForm">
            <input type="text" readonly placeholder=" 例：填写登录帐号" />
            <br/>
            <input type="password" readonly placeholder=" 例：填写登录密码" />
        </div>
        <!-- 绑定弹窗按钮 -->
        <a id="captchaButton">点击验证</a>
        <input type="submit" value="提  交" class="btn" />
    </form>
</body>
</html>